<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        body{
            background-color: #ccc;
        }
        #app{
            width: 400px;
            margin: 20px auto;
            background-color: #fff;
            border:4px solid blueviolet;
            border-radius: 1em;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
            padding:1em 2em 2em;
        }
        h3{
            text-align: center;
        }
        .box {
            padding:1em;
            border:1px solid #ccc;

        }
        
    </style>
</head>
<body>
    <div id="app">
        <h3>自定义指令</h3>
        <div>div</div>
        <input v-autofocus />
        <!-- 在输入框创建时，自动获取焦点 -->

    </div>
    <script>
        // 指令:是 vue中提供，以v-开头特殊的属性。它用于增强dom的功能 
        // 如果vue提供的指令不能满足需求，它允许我们自己去创建新的指令-----自定义指令

        // 定义格式：
        /*
            {
                data:,
                el,
                methods,
                filters,
                directives: {
                    // 全小写的名字
                    指令名1: {
                        inserted (el) {
                            console.log(el)
                        }
                    },
                    指令名2: {
                        inserted (el) {
                            console.log(el)
                        }
                    }
                }
            }
        */

        // 使用格式 "加上v-"
        // <元素 v-指令名1 ></元素>
        
        const vm = new Vue({
            el: "#app",
            data: {
                title: 'se',
            },
            directives: {
                // 指令名 autofocus 
                autofocus: {
                    // inserted是固定写法，它是一个函数
                    // 这个函数会在使用了这个指令元素创建完毕之后，去自动调用 
                    // 在调用的同时，会把当前使用了这个指令元素传入
                    inserted (el) {
                        console.log(el)
                        // el 就是dom元素
                        // el.style.height = "50px"
                        el.focus()
                    }
                }
            }
               

        })
       
    </script>

</body>
</html>